<template>
  <div>
    <div class="top">
      <div>
        <img src="@/assets/image/我的背景.jpg" alt="" class="background" />
        <img
          src="@/assets/image/icon/icon_2.png"
          alt=""
          class="set"
          @click="setup"
        />
        <div class="head" @click="Login">
          <img src="@/assets/image/login.png" alt="" />
        </div>
        <div class="name">
          <h3>
            <span v-if="isLogin == 'true'">Hi, {{ username }}</span>
            <span v-else>新用户,请登录</span>
            <img
              src="@/assets/image/icon/icon_1.png"
              alt=""
              @click="Register"
            />
          </h3>
        </div>
      </div>
      <div class="list">
        <ul>
          <li @click="Promote">
            <div>
              <img src="@/assets/image/icon/m_0_0.png" alt="" />
              <span>邀请有礼</span>
            </div>
            <img src="@/assets/image/icon/icon_3.png" alt="" class="jt" />
          </li>
          <li>
            <div>
              <img src="@/assets/image/icon/m_0_1.png" alt="" />
              <span>我的学习规划师</span>
            </div>
            <img src="@/assets/image/icon/icon_3.png" alt="" class="jt" />
          </li>
          <li @click="Modalbox">
            <div>
              <img src="@/assets/image/icon/m_0_2.png" alt="" />
              <span>关注公众号</span>
            </div>
            <img src="@/assets/image/icon/icon_3.png" alt="" class="jt" />
          </li>
        </ul>
        <ul>
          <li>
            <div>
              <img src="@/assets/image/icon/m_1_0.png" alt="" />
              <span>课程明细</span>
            </div>
            <img src="@/assets/image/icon/icon_3.png" alt="" class="jt" />
          </li>
          <li>
            <div>
              <img src="@/assets/image/icon/m_1_1.png" alt="" />
              <span>课程兑换</span>
            </div>
            <img src="@/assets/image/icon/icon_3.png" alt="" class="jt" />
          </li>
          <li @click="Mall">
            <div>
              <img src="@/assets/image/icon/m_1_2.png" alt="" />
              <span>砖石明细</span>
            </div>
            <img src="@/assets/image/icon/icon_3.png" alt="" class="jt" />
          </li>
          <li>
            <div>
              <img src="@/assets/image/icon/m_1_3.png" alt="" />
              <span>学习报告</span>
            </div>
            <img src="@/assets/image/icon/icon_3.png" alt="" class="jt" />
          </li>
          <li>
            <div>
              <img src="@/assets/image/icon/m_1_4.png" alt="" />
              <span>跟读作品</span>
            </div>
            <img src="@/assets/image/icon/icon_3.png" alt="" class="jt" />
          </li>
          <li>
            <div>
              <img src="@/assets/image/icon/m_1_5.png" alt="" />
              <span>物流详情</span>
            </div>
            <img src="@/assets/image/icon/icon_3.png" alt="" class="jt" />
          </li>
        </ul>
        <ul class="lastUl">
          <li @click="Equipment">
            <div>
              <img src="@/assets/image/icon/m_2_0.png" alt="" />
              <span>设备检测</span>
            </div>
            <img src="@/assets/image/icon/icon_3.png" alt="" class="jt" />
          </li>
          <li>
            <div>
              <img src="@/assets/image/icon/m_2_1.png" alt="" />
              <span>帮助与反馈</span>
            </div>
            <img src="@/assets/image/icon/icon_3.png" alt="" class="jt" />
          </li>
        </ul>
      </div>
    </div>
    <div class="model" v-if="show" @click="hide">
      <div class="model-list">
        <h2>关注爱课公众号</h2>
        <h3>你将获得以下集中特权</h3>
        <ul>
          <li>
            <img src="@/assets/image/icon/public_0.png" alt="" />
            <div>
              <h5>学习资料</h5>
              <h4>课程资料在线下载</h4>
            </div>
          </li>
          <li>
            <img src="@/assets/image/icon/public_1.png" alt="" />
            <div>
              <h5>福利活动</h5>
              <h4>参与活动领取奖品</h4>
            </div>
          </li>
          <li>
            <img src="@/assets/image/icon/public_2.png" alt="" />
            <div>
              <h5>专属客服</h5>
              <h4>一对一客服答疑</h4>
            </div>
          </li>
        </ul>
        <button>关注爱课公众号</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
  setup() {
    const isLogin = ref(localStorage.getItem("isLogin") || "false");
    const username = ref(localStorage.getItem("Cname") || "new user");

    const show = ref(false);
    const route = useRoute();
    const router = useRouter();
    const Modalbox = () => {
      show.value = true;
    };
    const Login = () => {
      if (isLogin.value == "false") {
        router.push("/login");
      } else {
        router.push("/register");
      }
    };
    const setup = () => {
      if (isLogin.value == "false") {
        router.push("/login");
      } else {
        router.push("/setup");
      }
    };
    const Register = () => {
      if (isLogin.value == "false") {
        router.push("/login");
      } else {
        router.push("/logincomplete");
      }
    };
    const Promote = () => {
      router.push("/promote");
    };
    const Mall = () => {
      router.push("/mall");
    };
    const Equipment = () => {
      router.push("/equipment");
    };
    const hide = () => {
      show.value = false;
    };
    return {
      Modalbox,
      show,
      hide,
      Login,
      setup,
      Register,
      Promote,
      Mall,
      Equipment,
      route,
      router,

      isLogin,
      username,
    };
  },
};
</script>

<style lang="less" scoped>
.background {
  width: 100%;
  position: relative;
}
.set {
  width: 22px;
  height: 18px;
  position: absolute;
  top: 20px;
  right: 20px;
}
.head {
  width: 70px;
  height: 70px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 20px;
}
.name {
  position: absolute;
  top: 140px;
  left: 20px;
  h3,
  span {
    color: #fff;
    font-size: 22px;
  }
  img {
    width: 28px;
    margin-left: 20px;
    margin-bottom: -4px;
  }
}
.list {
  width: 100%;
  position: absolute;
  top: 202px;
  ul {
    border-bottom: 4px solid #f1f5f7;
    padding-bottom: 20px;
    padding-top: 10px;
    background: #fffeff;
    border-radius: 25px;
  }
  li {
    width: 90%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 20px;
    margin-top: 20px;
    div {
      display: flex;
      align-items: center;
    }
    img {
      width: 26px;
    }
    span {
      vertical-align: middle;
      font-size: 15px;
      color: #181818;
      font-weight: 600;
      margin-left: 10px;
    }
    .jt {
      width: 8px;
    }
  }
}
.lastUl {
  margin-bottom: 50px;
}
.model {
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;

  .model-list {
    background: #fff;
    width: 275px;
    height: 350px;
    margin: 50% auto;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    ul {
      flex: 1;
      display: flex;
      flex-direction: column;
      li {
        flex: 1;
        display: flex;
        align-items: center;
        border-bottom: 2px solid #f1f5f7;
        div {
          margin-left: 10px;
        }
        h5 {
          color: #333333;
          font-size: 15px;
          font-weight: 600px;
        }
        h4 {
          color: #666666;
          font-size: 12px;
          margin-top: 5px;
        }
        img {
          width: 40px;
        }
      }
    }
    h2 {
      color: #000000;
      font-size: 19px;
      margin-top: 30px;
    }
    h3 {
      color: #717171;
      margin-top: 10px;
      font-size: 12px;
    }
    button {
      width: 80%;
      height: 40px;
      border-radius: 30px;
      border: none;
      background: #3b98ff;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 20px;
      margin-top: 20px;
    }
  }
}
</style>
